﻿<?xml version="1.0" encoding="utf-8"?><Articles><Article><ArticlesID>837</ArticlesID><Title>Sử dụng thuộc t&amp;#237;nh clearfix trong CSS</Title><Body>&amp;lt;p&amp;gt;The problem happens when a floated element is within a container box,&amp;lt;/p&amp;gt;
&amp;lt;p style=&amp;quot;text-align: center;&amp;quot;&amp;gt;&amp;lt;img width=&amp;quot;548&amp;quot; height=&amp;quot;107&amp;quot; src=&amp;quot;http://dev.meotom.net/Uploads/admin/2010/3/12/su_dung_clearfix_css_02.gif&amp;quot; alt=&amp;quot;Sử dụng thuộc t&amp;amp;iacute;nh clearfix trong CSS&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;that element does not automatically force the container&amp;amp;rsquo;s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:&amp;lt;/p&amp;gt;
&amp;lt;ul&amp;gt;
    &amp;lt;li&amp;gt;{clear: both;}&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;clearfix&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;
&amp;lt;p&amp;gt;Once you understand what is happening, use the method below to &amp;amp;ldquo;clearfix&amp;amp;rdquo; it.&amp;lt;/p&amp;gt;
&amp;lt;p style=&amp;quot;text-align: center;&amp;quot;&amp;gt;&amp;lt;img width=&amp;quot;548&amp;quot; height=&amp;quot;110&amp;quot; src=&amp;quot;http://dev.meotom.net/Uploads/admin/2010/3/12/su_dung_clearfix_css_01.gif&amp;quot; alt=&amp;quot;Sử dụng thuộc t&amp;amp;iacute;nh clearfix trong CSS&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p style=&amp;quot;text-align: left;&amp;quot;&amp;gt;Code:&amp;lt;/p&amp;gt;
&amp;lt;pre title=&amp;quot;code&amp;quot; class=&amp;quot;brush: css;&amp;quot;&amp;gt;
.clearfix:after { content: &amp;amp;quot;.&amp;amp;quot;; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
.clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } 
* html .clearfix { height: 1%; }&amp;lt;/pre&amp;gt;
&amp;lt;p style=&amp;quot;text-align: right;&amp;quot;&amp;gt;&amp;lt;em&amp;gt;Sưu tầm&amp;lt;/em&amp;gt;&amp;lt;/p&amp;gt;</Body><CommentEnabled>True</CommentEnabled><ViewCount>0</ViewCount><ReleaseDate>3/12/2010 1:46:47 AM</ReleaseDate><TotalComment>0</TotalComment><IsMedia>False</IsMedia><IsPicture>False</IsPicture><IsVote>True</IsVote><ArticlePassword /><PostVisible>0</PostVisible><ArticlePath>/2010/3/12/Su-dung-thuoc-tinh-clearfix-trong-CSS-345</ArticlePath><Approved>True</Approved><ImagePath /><CategoryId>29</CategoryId><ArrayCatID>29|25</ArrayCatID></Article></Articles>